<template lang="html">
  <div id="pageBox">
    <div class="imgBox pd14">
      <div class="imgBgColor">
        <img src="" alt="">
      </div>
    </div>
    <div class="agreement pd14">
      <div class="iconBox">
        <i class="iconfont icon-gou icon" @click="checkFun" :class="{unCheck:!check,check:check}"></i>
      </div>
      <div class="agreementBox">
        同意<span class="agreementItem">《静雅课堂平台服务协议》</span>、 <span class="agreementItem">《讲师机构入驻协议》</span>和<span class="agreementItem">《课程运营合作协议》</span>
      </div>
    </div>
    <div class="next" :class="{disabled:!check}" @click="nextPage">
      下一步
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      check:true
    }
  },
  methods:{
    checkFun(){
      this.check = !this.check;
    },
    nextPage(){
      if(!this.check) return;
      this.$router.push({
        path:"/checkInNext"
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    padding-top:0.14rem;
    .imgBox{
      width:100%;
      height:2rem;
      .imgBgColor{
        width:100%;
        height:100%;
      }
    }
    .agreement{
      font-size:0.12rem;
      margin:0.2rem 0;
      display: flex;
      .iconBox{
        width:0.24rem;
        line-height: 0.24rem;
        .icon{
          font-size:0.18rem;
        }
        .check{
          color:#31c27c;
        }
        .unCheck{
          color:#d8d8d8;
        }
      }
      .agreementBox{
        flex:1;
        .agreementItem{
          color:#0099FF;
        }
      }
    }
    .next{
      background:#31c27c;
      color:#fff;
      height:0.4rem;
      line-height: 0.4rem;
      text-align: center;
      font-size:0.14rem;
    }
    .disabled{
      background:#d8d8d8;
    }
  }
</style>
